<!--
 * @Description: 我的常用快捷入口
 * @Author: wangfuwei
 * @Date: 2020-12-02 13:41:50
 * @LastEditors: wangfuwei
 * @LastEditTime: 2020-12-10 18:40:03
 * @FilePath: /horizon-frontend/src/layouts/Shortcut.vue
-->
<template>
  <div class="layout-shortcut">
    <div class="title">
      <a-icon type="star" style="color:#F7B500;font-size:20px;" theme="filled" />
      <!-- 我的常用 -->
      <h4 style="margin-left:6px">我的常用</h4>
    </div>

    <a-spin style="min-height: 250px;" :spinning="loading">
      <div class="content">
        <div class="use-group-wrapper">
          <ul v-for="item in collectPages" :key="item.appCode">
            <!-- 应用组 -->
            <li class="label">{{ $t(item.appCode.toUpperCase()) }}</li>
            <template v-if="item.sysMenuList && item.sysMenuList.length">
              <li class="item" v-for="page in item.sysMenuList" :key="page.menuCode">
                <!-- 菜单名称 -->
                <div style="cursor:pointer" @click="toPath(page.path || `/${item.appCode}/${page.menuCode}`)">{{ $t(page.menuCode.toUpperCase()) }}</div>
              </li>
            </template>
          </ul>
        </div>
        <a-empty v-if="!loading && (!collectPages || !collectPages.length)" description="您尚未添加常用的功能">
          <img slot="image" src="~@/assets/images/emotional_nodata.png" />
          <a-button type="primary" ghost @click="showOpt" class="button">立即添加</a-button>
        </a-empty>
      </div>
    </a-spin>
    <!-- <option-modal ref="optionModal" @refresh="getCollected"></option-modal> -->
  </div>
</template>

<script>
export default {
  name: "Shortcut",
  components: {},
  data() {
    return {
      collectPages: [],
      loading: false,
    };
  },
  created() {
    this.getCollected();
  },
  methods: {
    showOpt() {
      this.$refs.optionModal.visible = true;
    },
    /**
     * @description: 获取当前已收藏的菜单
     */
    getCollected() {
      //this.loading = true;
      /* getCollected(this.$store.state.user.roles).then(res => {
        this.loading = false;
        this.collectPages = res && res.length ? res : [];
      }); */
    },
    /**
     * @description: 点击菜单跳转页面
     * @param {String} path 页面地址或路径
     */
    toPath(path) {
      if (path.startsWith("http://")) {
        window.open(path);
      } else {
        this.$router.push({
          path: path,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~ant-design-vue/lib/style/themes/default";

.layout-shortcut {
  width: 100%;
  background: #fff;
  box-shadow: 1px 4px 8px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  .title {
    padding-left: 25px;
    height: 30px;
    display: flex;
    align-items: flex-end;
    h4 {
      margin: 0;
    }
  }

  .content {
    width: 100%;
    padding: 0 50px 30px;
  }

  /deep/ .ant-empty-image {
    height: 120px;
    margin-bottom: 0;

    img {
      width: 120px;
      height: 120px;
    }
  }

  /deep/ .ant-empty-description {
    color: #000;
  }

  .button {
    font-size: 12px;
    border-radius: 2px;
    padding: 0px 15px;
    height: 30px;
  }

  .use-group-wrapper {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 20px;
    ul {
      padding: 0 24px 0 0;
      list-style: none;
      .label {
        width: 158px;
        padding-left: 12px;
        line-height: 24px;
        font-size: 13px;
        color: #000;
        background: #f3f3f5;
      }
      .item {
        font-size: 12px;
        padding: 5px 0 0 12px;
        a {
          color: rgba(0, 0, 0, 0.65);
        }
        a:hover {
          color: @primary-color;
        }
      }
    }
  }
}
</style>
